// $flat: if true, the button is filled instead of transparent
// $highlighted_child: if true, applies some special overrides for to a
// child element, see _panel.scss for details
+// $child_class: class name of the child element
//
@mixin panel_button($bg:$panel_fg_color, $fg:$panel_fg_color, $flat: true, $highlighted_child: false, $child_class:"") {
@if $flat {
box-shadow: none;
- &:active, &:overview, &:focus, &:checked {
- box-shadow: inset 0 0 0 100px transparentize($bg, 0.75);
+ &:active, &:focus, &:checked {
+ box-shadow: inset 0 0 0 100px transparentize($fg, 0.75);
&:hover {
- box-shadow: inset 0 0 0 100px transparentize($bg, 0.65);
+ box-shadow: inset 0 0 0 100px transparentize($fg, 0.65);
}
}
&:hover {
- box-shadow: inset 0 0 0 100px transparentize($bg, 0.8);
+ box-shadow: inset 0 0 0 100px transparentize($fg, 0.8);
}
} @else {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.2);
- &:active, &:overview, &:focus, &:checked {
+ &:active, &:focus, &:checked {
box-shadow: inset 0 0 0 100px $bg;
&:hover {
box-shadow: inset 0 0 0 100px transparentize($bg, 0.05);
border-radius: 99px;
}
- &:active, &:overview, &:focus, &:checked {
+ &:active, &:focus, &:checked {
box-shadow: none !important;
#{$child_class} {
- box-shadow: inset 0 0 0 100px transparentize($bg, 0.75);
- }
+ box-shadow: inset 0 0 0 100px transparentize($fg, 0.75);
- &:hover {
- box-shadow: none !important;
- #{$child_class} {
- box-shadow: inset 0 0 0 100px transparentize($bg, 0.65);
+ &:hover {
+ box-shadow: inset 0 0 0 100px transparentize($fg, 0.65) !important;
}
}
}
&:hover {
box-shadow: none !important;
#{$child_class} {
- box-shadow: inset 0 0 0 100px transparentize($bg, 0.8);
+ box-shadow: inset 0 0 0 100px transparentize($fg, 0.8);
}
}
}
transition-duration: $panel_transition_duration;
box-shadow: inset 0 -1px 0 0 $panel_border_color;
- // transparent panel on lock & login screens
- &.unlock-screen,
- &.login-screen,
- &:overview {
- background-color: transparent;
- box-shadow: none;
-
- .panel-button {
- @include panel_button($panel_system_fg_color);
- }
- }
-
// panel menus
.panel-button {
@include panel_button($panel_fg_color);
}
}
+ // transparent panel on lock & login screens
+ &.unlock-screen,
+ &.login-screen,
+ &:overview {
+ background-color: transparent;
+ box-shadow: none;
+
+ .panel-button {
+ @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color);
+
+ // clock
+ &.clock-display {
+ @include panel_button($panel_system_fg_color, $fg:$panel_system_fg_color, $highlighted_child: true, $child_class:".clock");
+ }
+ }
+ }
+
.panel-status-indicators-box,
.panel-status-menu-box {
spacing: 2px;
this.label_actor = this._label;
Main.overview.connect('showing', () => {
- this.add_style_pseudo_class('overview');
+ this.add_style_pseudo_class('checked');
this.add_accessible_state(Atk.StateType.CHECKED);
});
Main.overview.connect('hiding', () => {
- this.remove_style_pseudo_class('overview');
+ this.remove_style_pseudo_class('checked');
this.remove_accessible_state(Atk.StateType.CHECKED);
});